<template>
  <div style="display: none;">
    <!-- 这是一个纯逻辑组件，不需要模板内容 -->
  </div>
</template>

<script>
import { Loading } from 'element-ui'

export default {
  name: 'LoadingBox',
  data() {
    return {
      loadingInstance: null
    }
  },
  methods: {
    // 显示全屏加载
    show(text = '加载中...', options = {}) {
      const defaultOptions = {
        lock: true,
        text: text,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      }
      this.loadingInstance = Loading.service(Object.assign(defaultOptions, options))
      return this.loadingInstance
    },

    // 显示局部加载
    showLocal(text = '加载中...', options = {}) {
      const defaultOptions = {
        lock: false,
        text: text,
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      }
      this.loadingInstance = Loading.service(Object.assign(defaultOptions, options))
      return this.loadingInstance
    },

    // 隐藏加载
    hide() {
      if (this.loadingInstance) {
        this.loadingInstance.close()
        this.loadingInstance = null
      }
    },

    // 设置加载文本
    setText(text) {
      if (this.loadingInstance) {
        this.loadingInstance.setText(text)
      }
    },

    // 显示加载并返回Promise
    async showWithPromise(promise, text = '加载中...', options = {}) {
      this.show(text, options)
      try {
        const result = await promise
        return result
      } finally {
        this.hide()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 这是一个纯逻辑组件，不需要样式 */
</style> 